import React, { Component } from 'react'
import {
  View,
  TextInput,
  StyleSheet,
  Text,
  Image,
  SafeAreaView,
  Navigator,
  ScrollView,
  TouchableOpacity,
  ImageBackground,
  TouchableWithoutFeedback,
} from 'react-native'
import NavBar from '../../../../../components/PublicHeader';
import Slider from '@react-native-community/slider';
import Video from 'react-native-video';
import {
  width,
  titleHeight,
  deviceWidth,
  deviceHeight,
  unitWidth,
  statusBarHeight,
  reallySize,
} from '../../../../../utils/Global';
import { Images } from '../../../../../public/images/images';

// function formatTime(second) {
//   let h = 0,
//     i = 0,
//     s = parseInt(second);
//   if (s > 60) {
//     i = parseInt(s / 60);
//     s = parseInt(s % 60);
//   }
//   // 补零
//   const zero = function (v) {
//     return v >> 0 < 10 ? '0' + v : v;
//   };
//   return [zero(h), zero(i), zero(s)].join(':');
// }
export default class backgroundSettings extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isVisible: false,
      videoUrl: '',
      videoWidth: deviceWidth,
      videoHeight: deviceHeight - titleHeight, // 默认16：9的宽高比
      showVideoCover: true, // 是否显示视频封面
      showVideoControl: true, // 是否显示视频控制组件
      isPlaying: true, // 视频是否正在播放
      currentTime: 0, // 视频当前播放的时间
      duration: 0, // 视频的总时长
      isFullScreen: false, // 当前是否全屏显示
      playFromBeginning: true, // 是否从头开始播放
      Videopath: this.props.navigation.state.params.Videopath,
      index: this.props.navigation.state.params.index
    }

  }
  setVideoUrl = url => {
    this.setState({ videoUrl: url });
  };
  showOrDismiss = flag => {
    this.setState({ isVisible: flag });
  };
  componentDidMount = () => {

  }

  onChangeText(text) {
    this.setState({
      searchText: text
    })
  };

  onClick() {

  }

  _onLoadStart = () => {
    // console.log('视频开始加载');
  };

  _onBuffering = () => {
    // console.log('视频缓冲中...')
  };

  _onLoaded = data => {
    // console.log('视频加载完成');
    this.setState({
      duration: data.duration,
    });
  };

  _onProgressChanged = data => {
    // console.log('视频进度更新');
    if (this.state.isPlaying) {
      this.setState({
        currentTime: data.currentTime,
      });
    }
  };

  _onPlayEnd = () => {
    // console.log('视频播放结束');
    this.setState({
      currentTime: 0,
      isPlaying: false,
      playFromBeginning: true,
    });
  };

  _onPlayError = () => {
    // console.log('视频播放失败');
  };

  // /-------控件点击事件-------

  // / 控制播放器工具栏的显示和隐藏
  hideControl() {
    if (this.state.showVideoControl) {
      this.setState({
        showVideoControl: false,
      });
    } else {
      this.setState(
        {
          showVideoControl: true,
        },
        // 5秒后自动隐藏工具栏
        () => {
          setTimeout(() => {
            this.setState({
              showVideoControl: false,
            });
          }, 5000);
        },
      );
    }
  }

  // / 点击了播放器正中间的播放按钮
  onPressPlayButton() {
    const isPlay = !this.state.isPlaying;
    this.setState({
      isPlaying: isPlay,
      //   showVideoCover: true
    });
    if (this.state.playFromBeginning) {
      this.videoPlayer.seek(0);
      this.setState({
        playFromBeginning: false,
      });
    }
  }

  // / 点击了工具栏上的播放按钮
  onControlPlayPress() {
    this.onPressPlayButton();
  }

  // / 点击了工具栏上的全屏按钮
  onControlShrinkPress() {
    // console.log('===>>', this.state.isFullScreen);
  }

  // / 进度条值改变
  onSliderValueChanged(currentTime) {
    this.videoPlayer.seek(currentTime);
    if (this.state.isPlaying) {
      this.setState({
        currentTime: currentTime,
      });
    } else {
      this.setState({
        currentTime: currentTime,
        isPlaying: true,
        showVideoCover: false,
      });
    }
  }
  switchSkin() {
    this.props.navigation.push("Backgroundvideo")
  }

  render() {
    const { isFullScreen, isPlaying } = this.state;
    return (
      <View style={styles.container}>
        <Video
          ref={ref => (this.videoPlayer = ref)}
          //{ uri: this.state.Videopath }this.state.index >= 4 ? { uri: this.state.Videopath } : 
          source={this.state.index > 4 ? { uri: this.state.Videopath } : require('../../../../../assets/video/1656922031515097.mp4')}
          rate={1.0}
          volume={1.0}
          muted={false}
          paused={!this.state.isPlaying}
          resizeMode={'contain'}
          playWhenInactive={false}
          playInBackground={false}
          ignoreSilentSwitch={'ignore'}
          progressUpdateInterval={250.0}
          onLoadStart={this._onLoadStart}
          onLoad={this._onLoaded}
          onProgress={this._onProgressChanged}
          onEnd={this._onPlayEnd}
          onError={this._onPlayError}
          onBuffer={this._onBuffering}
          style={styles.styleVideo}
        />

        <View style={styles.contentWarper}>
          <View style={styles.cancel}>
            <Image style={styles.cancelImag} source={require("../../../../../assets/images/iconResources/del.png")} />
          </View>
          <ScrollView>
            <View style={styles.ItemBoxLeft} >
              <Image style={styles.SystemPromptLeft} source={require("../../../../../assets/images/iconResources/unsplash_mhlgSvuo.png")} />
              <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
            </View>
            <View style={styles.ItemBoxLeft} >
              <Image style={styles.SystemPromptLeft} source={require("../../../../../assets/images/iconResources/unsplash_mhlgSvuo.png")} />
              <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
            </View>
            <View style={styles.ItemBoxLeft} >
              <Image style={styles.SystemPromptLeft} source={require("../../../../../assets/images/iconResources/unsplash_mhlgSvuo.png")} />
              <Text style={styles.news}>你可以给我一些帮助嘛？你可以给我一些帮助嘛？</Text>
            </View>
          </ScrollView>
          <TouchableOpacity style={styles.switchSkin}
            onPress={() => this.switchSkin()}>
            <View style={styles.switchSkinBox}>
              <Image style={styles.switchSkinImg} source={require('../../../../../assets/images/iconResources/switchSkin.png')} />
              <Text style={styles.text}>切换背景视频</Text>
            </View>
          </TouchableOpacity>
        </View>
        {/* <TouchableWithoutFeedback
            onPress={() => {
              this.hideControl();
            }}>
            <View
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: this.state.videoWidth,
                height: isFullScreen
                  ? this.state.videoHeight
                  : this.state.videoHeight * 0.6,
                backgroundColor: 'transparent',
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              {isPlaying ? null : (
                <TouchableWithoutFeedback
                  onPress={() => {
                    this.onPressPlayButton();
                  }}>
                  <Image
                    style={styles.playButton}
                    source={Images.shoppingMall_control_play}
                  />
                </TouchableWithoutFeedback>
              )}
            </View>
          </TouchableWithoutFeedback> */}
        {/* {this.state.showVideoControl ? (
            <View style={[styles.control, { width: this.state.videoWidth }]}>
              <TouchableOpacity
                activeOpacity={0.3}
                onPress={() => {
                  this.onControlPlayPress();
                }}>
                <Image
                  style={styles.playControl}
                  source={
                    isPlaying
                      ? Images.shoppingMall_control_pause
                      : Images.shoppingMall_control_play
                  }
                />
              </TouchableOpacity>
              <Text style={styles.time}>
                {formatTime(this.state.currentTime)}
              </Text>
              <Slider
                style={{ flex: 1 }}
                maximumTrackTintColor={'#999999'}
                minimumTrackTintColor={'#00c06d'}
                thumbImage={Images.shoppingMall_control_slider}
                value={this.state.currentTime}
                minimumValue={0}
                maximumValue={this.state.duration}
                onValueChange={currentTime => {
                  this.onSliderValueChanged(currentTime);
                }}
              />
              <Text style={styles.time}>{formatTime(this.state.duration)}</Text>
              <TouchableOpacity
                activeOpacity={0.3}
                onPress={() => {
                  this.setState({
                    isFullScreen: !isFullScreen,
                  });
                }}>
                <Image
                  style={styles.shrinkControl}
                  source={
                    isFullScreen
                      ? Images.shoppingMall_control_shrink_screen
                      : Images.shoppingMall_control_full_screen
                  }
                />
              </TouchableOpacity>
            </View>
          ) : null} */}
      </View>
    );
  }

}
const styles = StyleSheet.create({
  container: {
    position: "relative",
    flex: 1,
  },
  styleVideo: {
    // width: deviceWidth,
    height: deviceHeight,
    backgroundColor: "red"
  },
  contentWarper: {
    width: deviceWidth,
    height: deviceHeight,
    position: "absolute",
    top: 0,
    left: 0,
    paddingTop: 60,
    paddingLeft: 40,
    paddingRight: 40,
    flex: 1,
    backgroundColor: "transparent"
  },
  cancel: {
    width: "100%",
    flexDirection: "row",
    justifyContent: "flex-end",
  },
  cancelImag: {
    width: 30,
    height: 30
  },
  ItemBoxLeft: {
    marginTop: 30,
    flexDirection: "row",
    justifyContent: "flex-start"
  },

  SystemPromptLeft: {
    width: 45,
    height: 45,
    marginRight: 15
  },
  news: {
    width: 250,
    fontSize: 15,
    color: "#333",
    padding: 10,
    backgroundColor: "#fff",
    borderRadius: 10
  },
  switchSkin: {
    width: 80,
    height: 80,
    position: "absolute",
    bottom: 0,
    right: 0,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    borderTopStartRadius: 100
  },
  switchSkinBox: {
    marginLeft: 20,
    marginTop: 10
  },
  switchSkinImg: {
    width: 35,
    height: 35,
    marginLeft: 5
  },
  text: {
    fontSize: 8,
    color: "#1890FF"
  },
  playButton: {
    marginTop: -titleHeight,
    width: 50,
    height: 50,
  },
  playControl: {
    width: 24,
    height: 24,
    marginLeft: 15,
  },
  shrinkControl: {
    width: 15,
    height: 15,
    marginRight: 15,
  },
  time: {
    fontSize: 12,
    color: 'white',
    marginLeft: 10,
    marginRight: 10,
  },
  control: {
    flexDirection: 'row',
    height: 44,
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    position: 'absolute',
    bottom: titleHeight * 0.2,
    left: 0,
  },
});
